import { Navigator } from "@tarojs/components";
import { useReachBottom, useRouter } from "@tarojs/taro";

import Money from "@/components/app/Money";
import ByRow from "@/components/ui/ByRow";
import ByText from "@/components/ui/ByText";
import Card from "@/components/common/Card";
import Page from "@/components/common/Page";
import Moment from "@/components/app/Moment";
import ByButton from "@/components/ui/ByButton";
import ListView from "@/components/app/ListView";

import useEnum from "@/hooks/useEnum";
import useList from "@/hooks/useList";
import ApiFinance from "@/api/finance";

/**
 * ProjectPaymentItem
 */
export interface ProjectPaymentItem {
  /**
   * 申请金额
   */
  applyAmount: number;
  /**
   * 审核时间
   */
  auditTime?: number;
  /**
   * 审核人
   */
  auditUserName?: string;
  /**
   * 单据编号
   */
  billNo: string;
  /**
   * 单据类型
   */
  billType: number;
  /**
   * 创建时间
   */
  createTime: number;
  /**
   * 创建人
   */
  createUserName: string;
  /**
   * 客户名称
   */
  customerName: string;
  /**
   * 客户编号
   */
  customerNo: string;
  /**
   * 装修地址
   */
  decorationAddress: string;
  /**
   * 费用类别
   */
  feeCategory: string;
  /**
   * 附件数量
   */
  fileCount?: number;
  /**
   * 意向客户ID
   */
  intentCustomerId: number;
  /**
   * 付款单ID
   */
  paymentBillId: number;
  /**
   * 付款阶段
   */
  paymentStage: string;
  /**
   * 驳回日期
   */
  rejectDate?: number;
  /**
   * 驳回原因
   */
  rejectReason?: string;
  /**
   * 驳回人ID
   */
  rejectUserId?: number;
  /**
   * 驳回人名称
   */
  rejectUserName?: string;
  /**
   * 备注
   */
  remark?: string;
  /**
   * 状态 -1拒绝 0 已保存 1已提交 2已通过
   */
  status: number;
  /**
   * 摘要
   */
  summary: string;
  /**
   * 付款对象ID
   */
  tagetUserId: number;
  /**
   * 付款对象名称
   */
  tagetUserName: string;
  /**
   * 付款对象类型 0:施工人员,1:供应商，2:工人
   */
  tagetUserType: number;
  /**
   * 工作流实例ID
   */
  workFlowInstanceId?: number;
  [property: string]: any;
}

// 状态 -1拒绝 0 已保存 1已提交 2已通过
const enumStatus = [
  // { label: "已保存", value: 0, color: "primary" },
  { label: "待审核", value: 1, color: "primary" },
  { label: "已通过", value: 2, color: "success" },
  // 文档是-1
  { label: "已驳回", value: -1, color: "error" },
  // 看返回数据是3
  { label: "已驳回", value: 3, color: "error" },
];

export default () => {
  const { params } = useRouter();
  const intentCustomerId = Number(params.intentCustomerId);

  const { loading, list, nextPage } = useList<ProjectPaymentItem>(
    ApiFinance.getPaymentApplyList,
    {
      defaultParams: [{ intentCustomerId }],
    }
  );

  useReachBottom(() => nextPage());

  const { getOption } = useEnum(enumStatus);

  return (
    <>
      <Page
        footerSticky
        slotFooter={
          <ByButton
            size="large"
            className="w-2/3"
            to={`apply?intentCustomerId=${intentCustomerId}`}
          >
            申请
          </ByButton>
        }
      >
        <ListView loading={loading} isEmpty={list.length === 0}>
          {list.map((item) => (
            <Navigator
              key={item.paymentBillId}
              className="m-3"
              url={`detail?paymentBillId=${item.paymentBillId}&wl_id=${item.workFlowInstanceId}`}
            >
              <Card>
                <ByRow content="between">
                  <ByText bold>{item.summary}</ByText>

                  <ByText size="sm" type={getOption(item.status, "color")}>
                    {getOption(item.status, "label")}
                  </ByText>
                </ByRow>

                <ByRow content="between" className="mt-2">
                  <Money value={item.applyAmount} size="sm" />

                  <ByText size="sm" type="third">
                    <Moment value={item.createTime} type="full" />
                  </ByText>
                </ByRow>
              </Card>
            </Navigator>
          ))}
        </ListView>
      </Page>
    </>
  );
};
